<!-- 博客详情页 -->
<template>
	<div class="blog-detile-body-box" >
		<div class="blog-body">
			<div class="blog-container">

				<div class="blog-main">
				<div class="blog-detis-call-back-icon-box">
					<el-tooltip class="item" effect="light" content="返回博客列表" placement="top">
						<i class="el-icon-cloudy-and-sunny my-el-icon" @click="callBackBlogList" ></i>
					</el-tooltip>
				</div>
					<div class="blog-main-left">
						<!-- 文章内容（使用Kingeditor富文本编辑器发表的） -->
						<div class="article-detail shadow">
							<div class="article-detail-title">
								{{this.title}}
							</div>
						<!-- 	<div class="article-detail-info">
								<span>编辑时间：{{this.createTime}}</span>
								<span>作者：{{this.author}}</span>
							</div> -->

							<div class="article-detail-content">
							    <div v-html="compiledMarkdown"></div>
								<!-- <div v-html="blogContent"></div> -->
							</div>
						</div>
					</div>
					<div class="clear"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		devArticleManagementUrl
	} from '@/api/apiconst'
	import hljs from 'highlight.js'//引用
	import "highlight.js/styles/sunburst.css";
	export default {
		name: "BlogDetile",
		data() {
			return {
				title: '',
				author: '',
				createTime: '',
				blogContent:''
			}
		},
		computed: {
			compiledMarkdown : function () {
				const {marked} = require("marked");
				 marked.setOptions ({
				        gfm: true ,//允许Git Hub标准的markdown.
				        tables: true ,//允许支持表格语法。该选项要求 gfm 为true
				        breaks: false ,//允许回车换行。该选项要求 gfm 为true。
						highlight: function(code) {
							return hljs.highlightAuto(code).value;
						},
				    })
				return this.blogContent;
			
				
				//return marked( this.blogContent);
			}
		},
		mounted() {

			this.$axios({
				method: 'GET',
				url: '/article/queryBlogDetails/' + this.$route.query.blogId+'/true',
				baseURL: devArticleManagementUrl,
			}).then(
				response => {
					if (response.data.code == 200) {
						let blogDetiles = response.data.data;
						console.log("文章详情数据", response.data.data)
						this.title = blogDetiles.title;
						this.author = blogDetiles.nick_name;
						this.createTime = blogDetiles.create_time;
						this.blogContent= blogDetiles.content;
					}
				},
				error => {
					this.$message.error('诶呀~服务器走丢了');
				}
			);
			
		},
		methods:{
			callBackBlogList() {
				//跳转到博客界面
				this.$router.push({
					path: "/blogList"
				});
			}
		}
	}
</script>

<style>

	.blog-detis-call-back-icon-box {
		width: 13%;
		height: 20%;
		top: 3%;
		right: 1%;
		position: fixed;
		color:#F2F6FC;
		font-size: 34px;
		  
		  
		  
	}
	.blog-detile-body-box {
		background: url("@/assets/images/blog-detiles-map.jpg");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: top center;
		background-attachment: fixed;
		overflow: auto;
		height: 100%;
		width: 100%;
		min-height:100vh;
	

	}

	.article-detail {
		padding: 15px;
		
		margin-bottom: 15px;
	}

	.article-detail-title {
		text-align: center;
		margin: 20px 0px;
		color: white;
		font-weight: 700;
		text-shadow: 0 0 8px #000000;
		font-size: 24px;
	}

	.article-detail-info {
		border: 1px dashed #808080;
		border-left: none;
		border-right: none;
		font-size: 13px;
		color: white;
		padding: 5px 0;
		font-family: SimSun;
		text-align: center;
		margin: 0 0 10px;
	}

	.article-detail-info span {
		margin: 0 5px;
	}

	.article-detail-content {
		padding: 10px 5px;
		width: 70%;
		margin:auto;
	}



	/*代码区域*/
	pre {
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 0px !important;
		font-size: 13px !important;
		color:#409EFF ;
	}
</style>
